<template lang="html">
  <div id="symptom">
  	<div  v-for='(item,index) in contain'  class='symptom-subject' @click='IdHander(item)'>
		<p>
  			<i class="icon iconfont icon-chengshi"></i>
			根据您的<b>{{item.bing}}</b>推荐
  		</p>
  		<div class='subject'>
			<div class='subject-img'>
				<img v-bind:src="item.img"/>
			</div>
			<div class='subject-right'>
				<h2>{{item.title}}</h2>
				<p>{{item.content}}</p>	
				<a href="">￥{{item.price}}</a>
			</div>
  		</div>
  	</div>
  	<BottomNav />
  </div>
</template>

<script>

import BottomNav from '../../BottomNav.vue'

export default {
  name:'Symptom',
  data () {
    return {
    	contain:''
    }
  },
  components:{
    BottomNav
  },
  mounted(){
  	this.$axios.get(this.HOST + '/api/symptomatic')
  	.then(res => {
  		this.contain = res.data.list;
  	})
  	.catch(error => {
  		console.log(error)
  	})
  },
  methods:{
  	IdHander(item){
  		console.log(item._id)
  	}
  }
}
</script>

<style lang='less' scoped>
#symptom{
	width: 100%;
	height: 100%;
	border-top: 1px solid #717171;
	.symptom-subject{
		width: 90%;
		height: 3rem;
		float: left;
		margin:0.5rem 5% 0;
		border-bottom:1px solid #717171;
		.subject{
			width: 100%;
			height: 2.5rem;
			float: left;
			.subject-img{
				height: 100%;
				width: 40%;
				padding:0.3rem 0;
				box-sizing:border-box;
				float: left;
				img{
					width: 100%;
					height: 100%;

				}
			}
			.subject-right{
				width: 60%;
				height: 2.5rem;
				float: left;
				padding:0.3rem;
				box-sizing:border-box;
				p{
					margin: 0.2rem 0;
				}
				a{
					font-size:0.35rem;
					color:red;
				}
			}
		}
	}
}
</style>


